<template>
    <div class="vehicle-list">
        <div class="vehicle-list-head">
            <div>
                <span>车型</span>
                <span :class="modelChecked === -1 ? 'vehicle-active' : ''" @click="allModel">全部</span>
                <div class="vehicle-head-box">
                    <span 
                        v-for="(item, index) of modelList" 
                        :key="item.id" 
                        :class="modelChecked === index ? 'vehicle-active' : ''"
                        @click="chagneModel(item.id, index)">{{item.name}}</span>
                </div>
            </div>
            <div>
                <span>状态</span>
                <span :class="stateChecked === -1 ? 'vehicle-active' : ''" @click="allState">全部</span>
                <div class="vehicle-head-box">
                    <span 
                        v-for="(item, index) of stateList" 
                        :key="item.id" 
                        :class="stateChecked === index ? 'vehicle-active' : ''"
                        @click="changeState(item.id, index)">{{item.name}}</span>
                </div>
            </div>
        </div>
 
        <div class="vehicle-list-keyword">
            <img src="./../../../assets/images/vehicle/car.png">
            <el-input
                placeholder="搜索厂牌型号、车牌号"
                @keyup.enter.native="getList"
                v-model="listParam.keyword">
                <i slot="suffix" class="el-input__icon el-icon-search" @click="getList"></i>
            </el-input>
        </div>

        <div v-loading="loading" v-if="listData.length > 0" class="vehicle-list-content">
           <div>
                <div v-for="(item, inx) in listData" :key="inx" class="vehicle-list-box">
                    <img v-if="item.image.length > 0" :src="BASE_URL + item.image[0]">
                    <img v-else src="./../../../assets/images/vehicle/bus.png">
                    <div>
                        <div>
                            <span>{{item.brand}}</span>
                            <span>{{item.number}}</span>
                        </div>
                        <span :class="classList[item.status - 1]">{{stateList[item.status - 1].name}}</span>
                    </div>

                    <div class="vehicle-cover-box">
                        <span @click="getDetail(item.id)">查看详情</span>
                    </div>
                </div>
           </div>

            <div class="pageBox" v-if="totalNumber > 9">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="changePage"
                    :page-size="listParam.pageSize"
                    :current-page="listParam.pageIndex"
                    :total="totalNumber">
                </el-pagination>
            </div>
        </div>
        <div v-else class="vehicle-no-data">
            <i class="ipng image_state01"></i>
            <span>没有发现任何相关内容</span>
        </div>
    </div>
</template>
   
<script>
export default {
    data() {
        return {
            loading: false,
            modelChecked: -1, // 车型高亮
            stateChecked: -1, // 状态高亮
            totalNumber: 0,
            listData: [],
            modelList: [], // 车型列表
            classList: ['vehicle-useing', 'vehicle-idle', 'vehicle-disable', 'vehicle-damage', 'vehicle-scrapped'],
            stateList: [{id: 1, name: '使用中'}, {id: 2, name: '闲置'}, {id: 3, name: '停用'}, {id: 4, name: '损坏'}, {id: 5, name: '报废'}],
            listParam: {
                modelId: undefined, // 选中车型
                stateId: undefined, // 选中状态
                keyword: '',
                pageSize: 9,
                pageIndex: 1
            }
        }
    },
    created() {
        this.getList();
        this.getModel();
    },
    methods: {
        /**
         * 获取车型列表
         */
        getModel() {
            const success = (res => {
                this.modelList = res.data;
            })

            this.$ajax({
                url: 'api/car/typelists',
                method: 'get',
                params: {in_use: 1},
                func: {success: success}
            });
        },
        /**
         * 获取车辆列表
         */
        getList() {
            this.loading = true;

            const success = (res => {
                this.loading = false;
                this.listData = res.data.data;
                this.totalNumber = res.data.data_sum;
            })
            const params = {
                page_index: this.listParam.pageIndex,
                page_size: this.listParam.pageSize,
                status: this.listParam.stateId,
                type_id: this.listParam.modelId,
                keyword: this.listParam.keyword,
                with_image: 1
            }

            this.$ajax({
                url: 'api/car/lists',
                method: 'get',
                params,
                func: {success: success}
            });
        },
        /**
         * 改变车型
         * @param {Number} id 车型id
         * @param {Number} id 车型下标
         */
        chagneModel(id, inx) {
            this.modelChecked = inx;
            this.listParam.modelId = id;
            this.listParam.keyword = '';

            this.getList();
        },
        /**
         * 改变状态
         * @param {Number} id 状态d
         * @param {Number} id 状态下标
         */
        changeState(id, inx) {
            this.stateChecked = inx;
            this.listParam.stateId = id;
            this.listParam.keyword = '';

            this.getList();
        },
        /**
         * 重置车型选择
         */
        allModel() {
            this.modelChecked = -1;
            this.listParam.modelId = undefined;
            this.listParam.keyword = '';

            this.getList();
        },
        /**
         * 重置状态选择
         */
        allState() {
            this.stateChecked = -1;
            this.listParam.stateId = undefined;
            this.listParam.keyword = '';

            this.getList();
        },
        /**
         * 查看详情
         * @param {Number} id 详情id
         */
        getDetail(id) {
            this.$router.push('/vehicle/detail?id=' + id);
        },
        /**
         * 切换分页
         * @param {Number} val 分页
         */
        changePage(val) {
            this.listParam.pageIndex = val;
            this.getList();
        }
    },
};
</script>

<style lang="scss">
    .vehicle-list {
        margin: 30px auto 44px;
        width: 1200px;
        min-height: calc(100vh - 198px);

        .vehicle-list-head {
            padding: 20px 40px 2px;
            font-size: 14px;
            background: #FFFFFF;
            border-radius: 3px;
            box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);

            .vehicle-active {
                color: #348EFC;
            }

            >div {
                display: flex;
                font-size: 14px;

                >span {
                    margin-right: 40px;
                }

                >span:first-child {
                    color: #666;
                }

                >span:nth-child(2) {
                    cursor: pointer;
                }
            }

            >div:first-child {
                margin-bottom: 20px;
            }

            .vehicle-head-box {
                display: flex;
                flex-wrap: wrap;
                flex: 1;
                width: 0;

                span {
                    margin-right: 40px;
                    margin-bottom: 20px;
                    cursor: pointer;
                }
            }
        }

        .vehicle-list-keyword {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 20px auto;
            padding: 0 34px;
            height: 60px;
            line-height: 60px;
            background: #FFFFFF;
            border-radius: 3px;
            box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);

            >div {
                width: 300px;

                input {
                    height: 36px;
                    border-radius: 18px;
                    border: 1px solid #DDDDDD;
                }
            }
        }

        .vehicle-no-data {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: calc(100vh - 431px);
            font-size: 20px;
            background: #fff;

            >span {
                margin-top: 14px;
                color: #888;
            }
        }

        .vehicle-list-content {
            >div:first-child {
                display: flex;
                flex-wrap: wrap;
            }

            .vehicle-list-box {
                position: relative;
                display: flex;
                margin-right: 15px;
                margin-bottom: 20px;
                padding: 20px;
                width: 390px;
                height: 240px;
                background: #FFFFFF;
                border-radius: 4px;
                box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
                box-sizing: border-box;

                img {
                    margin-right: 20px;
                    width: 200px;
                    height: 200px;
                    object-fit: cover;
                }

                >div:nth-child(2) {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    div {
                        span:first-child {
                            display: block;
                            margin-bottom: 16px;
                            font-size: 16px;
                            font-weight: bold;
                            color: #000000;
                        }

                        span:last-child {
                            font-size: 16px;
                            color: #666666;
                        }
                    }

                    >span {
                        width: 70px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 14px;
                        text-align: center;
                        border-radius: 15px;
                        
                    }
                }

                .vehicle-idle {
                    color: #427A58;
                    background: #D4FFD1;
                }

                .vehicle-useing {
                    color: #DAF4FF;
                    background: #4199AE;
                }

                .vehicle-disable {
                    color: #888;
                    background: #EDEDED;
                }

                .vehicle-damage {
                    color: #B53E3E;
                    background: #FFD1D1;
                }

                .vehicle-scrapped {
                    color: #fff;
                    background: #C0C0C0;
                }
            }

            .vehicle-list-box:nth-child(3n) {
                margin-right: 0;
            }

            .vehicle-cover-box {
                display: none;
            }

            .vehicle-list-box:hover .vehicle-cover-box {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: -20px;
                margin-left: -20px;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.3);

                span {
                    width: 120px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    font-size: 16px;
                    background: #fff;
                    border-radius: 5px;
                    cursor: pointer;
                }
            }

            .pageBox {
                display: inline-block;
                background: #fff;

                .el-pagination.is-background .btn-prev,
                .el-pagination.is-background .btn-next,
                .el-pagination.is-background .el-pager li {
                    background: #fff;
                }

                .el-pagination.is-background .el-pager .active {
                    background: #409EFF;
                }
            }
        }
    }
</style>
